<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<link href="/css/index_style.css" rel="stylesheet" type="text/css"/>
	<link rel="stylesheet" href="/layui/css/layui.css" media="all" />
	<script src="/js/jquery-1.7.2.js" type="text/javascript"></script>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="viewport"
		  content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>

	<title>旅游信息管理系统</title>
	<!-- 引入bootstrap样式 -->
	<link th:href="@{/bootstrap/css/bootstrap.css}" rel="stylesheet" type="text/css">
	<!--图标库-->
	<link th:href="@{/lyear/css/materialdesignicons.min.css}" rel="stylesheet" type="text/css"/>
	<!--自定义样式-->
	<link href="../lyear/css/style.min.css" th:href="@{/lyear/css/style.min.css}" rel="stylesheet" type="text/css"/>

	<style>
    	body{
    		background-color: #212221;
    	}

    	.ct-login{
			position: relative;
			z-index: 999;
			padding-top: 50px;
		}

		.panel-login{
			width: 320px;
			padding: 0 0;
		}

		.form-item{
			margin-top: 15px;
			margin-bottom: 15px;
		}
		.header{
    		position: fixed;
		    left: 0px;
		    top: 0px;
		    z-index: 0;
			height: 100%;
		}

		.login {
			margin: 120px auto 0 auto;
			min-height: 380px;
			max-width: 330px;
			padding: 40px;
			/*background-color: #ffffff;*/
			border-radius: 4px;
			overflow-x: hidden;
			box-sizing: border-box;
			width: 330px;
			position: absolute;
			top: 50%;
			left: 50%;
			margin-top: -150px;
			margin-left: -165px;
			border: 0px;

		}

		.login a.logo {
			display: block;
			height: 58px;
			width: 167px;
			margin: 0 auto 30px auto;
			background-size: 167px 42px;
		}

		.login .message {
			width: auto;
			/*margin: 10px 0 0 -58px;*/
			/*padding: 18px 10px 18px 60px;*/
			/*background: #252526;*/
			position: relative;
			text-align: center;
			color: #fff;
			font-size: 21px;
		}

		.login input[type=text],
		.login input[type=file],
		.login input[type=password],
		.login input[type=email], select {
			border: 1px solid #DCDEE0;
			vertical-align: middle;
			border-radius: 3px;
			/*height: 50px;*/
			margin-bottom: 10px;
			padding: 0px 16px;
			font-size: 14px;
			color: #555555;
			outline: none;
			width: 100%;
			box-sizing: border-box;
		}

		.login input[type=text]:focus,
		.login input[type=file]:focus,
		.login input[type=password]:focus,
		.login input[type=email]:focus, select:focus {
			border: 1px solid #27A9E3;
		}

		.login input[type=submit],
		.login input[type=button] {
			display: inline-block;
			vertical-align: middle;
			padding: 12px 24px;
			margin: 0px;
			font-size: 18px;
			line-height: 24px;
			text-align: center;
			white-space: nowrap;
			vertical-align: middle;
			cursor: pointer;
			color: #ffffff;
			background-color: #393d47;
			border-radius: 3px;
			border: none;
			-webkit-appearance: none;
			outline: none;
			width: 100%;
		}

		.login hr.hr15 {
			height: 15px;
			border: none;
			margin: 0px;
			padding: 0px;
			width: 100%;
		}

		.login hr.hr20 {
			height: 20px;
			border: none;
			margin: 0px;
			padding: 0px;
			width: 100%;
		}
    </style>
	<style>
		.lear-wrapper {
			position: relative;
		}
		.lear-login {
			display: flex !important;
			min-height: 100vh;
			align-items: center !important;
			justify-content: center !important;
		}
		.login-center1 {
			background: #fff;
			min-width: 38.25rem;
			padding: 2.14286em 3.57143em;
			border-radius: 5px;
			margin: 2.85714em 0;
		}
		.login-header {
			margin-bottom: 1.5rem !important;
		}
		.login-center .has-feedback.feedback-left .form-control {
			padding-left: 38px;
			padding-right: 12px;
		}
		.login-center .has-feedback.feedback-left .form-control-feedback {
			left: 0;
			right: auto;
			width: 38px;
			height: 38px;
			line-height: 38px;
			z-index: 4;
			color: #dcdcdc;
		}
		.login-center .has-feedback.feedback-left.row .form-control-feedback {
			left: 15px;
		}
	</style>
</head>
<body>
<!--	<div class="header" style="height:100%">-->
<!--	  <div class="canvaszz"  style="height:100%"> </div>-->
<!--	  <canvas id="canvas"></canvas>-->
<!--	</div>-->
<!--	<div class="login">-->
<!--		<form class="layui-form" method="post" action="/loging">-->
<!--			<div class="layui-form-item">-->
<!--				<div class="message">旅游信息管理系统</div>-->
<!--			</div>-->
	<div class="row lear-wrapper">
		<div class="lear-login">
			<div class="login-center1">
				<div class="login-header text-center">
					<h1>——新疆旅游信息管理系统——</h1>
				</div>
	<form class="layui-form" method="post" action="/loging"id="form_id">
			<div class="layui-form-item">
				<div class="layui-input-black">
					<div class="form-group has-feedback feedback-left">
					<input type="text" id="userName" name="userName" required="required"
						   lay-verify="username" placeholder="请输入帐号" autocomplete="off" class="form-control"/>
					<span class="help-block"/><span class="mdi mdi-account form-control-feedback"
							  aria-hidden="true"></span>
						</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-input-black">
					<div class="form-group has-feedback feedback-left">
					<input type="password" id="password" name="password" required="required"
						   lay-verify="password" placeholder="请输入密码" autocomplete="off" class="form-control"/>
						<span class="help-block"/>
						<span class="mdi mdi-lock form-control-feedback"
							  aria-hidden="true"></span>
				</div>
					</div>
			</div>
		<div id="captcha_note_parent"
			 class="form-group has-feedback feedback-left row">
			<div class="col-xs-7">
				<input type="text" id="captcha" name="captcha"
					   class="form-control" placeholder="请输入验证码">
			</div>
			<div class="col-xs-5">
				<canvas id="canvas" width="120" height="45"></canvas>
			</div>
			<span id="captcha_note_child" class="help-block"
				  style="margin-left: 15px"></span>
		</div>


		<div class="form-group">
			<button class="login-btn" class="btn btn-block btn-primary"type="submit" style="width:100%; background-color: #393d47">登录</button>
		</div>
		<div><p th:text="${message}" style="color: white"></p></div>
	</form></div>
	</div>
	</div>
	<div class="layui-footer footer">
 	</div>
<!-- 引入jQuery和bootstrap的js -->
<script th:src="@{/js/jquery.js}"></script>
<script th:src="@{/bootstrap/js/bootstrap.js}"></script>
<!-- 点线粒子插件 -->
<script color="255,255,255" opacity='0.8'
		zIndex="9999" count="99"
		src="/js/canvas-nest.js" th:src="@{/js/canvas-nest.js}"></script>
<script color="221,160,221" opacity='0.8'
		zIndex="9999" count="88"
		src="/js/canvas-nest.js" th:src="@{/js/canvas-nest.js}"></script>
<script color="34,139,34" opacity='0.8'
		zIndex="9999" count="77"
		src="/js/canvas-nest.js" th:src="@{/js/canvas-nest.js}"></script>
<script>
	formobj=document.getElementById('form_id');
	formobj.onsubmit=function abc(){return false;}
	var show_num = [];
	$(function () {
		$("input[name='username']").blur(verifyUsername);
		$("input[name='password']").change(removeLoginDisabled);
		//生成图片验证码
		drawPic(show_num);
		$("#canvas").click(function (e) {
			//取消事件的默认动作。
			e.preventDefault();
			drawPic(show_num);
		});
		$("#captcha").blur(verifyCaptcha);
		$("#login_btn").mousedown(verifyLogin);
		//回车登录
		$("body").keyup(function (event) {
			if (event.keyCode === 13) {//keyCode=13是回车键
				verifyLogin();
			}
		});

	});

	function verifyCaptcha() {
		var captcha_num = $("#captcha").val().toLowerCase();
		var real_num = show_num.join("");
		$("#captcha_note_parent").removeClass("has-success has-error");
		$("#captcha_note_child").text("");
		if (captcha_num == "") {
			$("#captcha_note_parent").addClass("has-error");
			$("#captcha_note_child").text("验证码为空");
			$("#login_btn").attr("disabled", "disabled");
			formobj.onsubmit=function abc(){
			return false;}
		} else if (captcha_num == real_num) {
			$("#captcha_note_parent").addClass("has-success");
			$("#captcha_note_child").text("验证码正确");
			$("#login_btn").removeAttr("disabled");
			formobj.onsubmit=function abc(){
			return true;}
		} else {
			$("#captcha_note_parent").addClass("has-error");
			$("#captcha_note_child").text("验证码错误");
			$("#login_btn").attr("disabled", "disabled");
			formobj.onsubmit=function abc(){
			return false;}
		}
	}

	function verifyUsername() {
		//发送ajax请求校验用户名是否可用
		var username = document.getElementById("username").value;
		var lock = true;
		if (username === "") {
			show_validate_msg("#username", "error", "用户名为空");
			$("#login_btn").attr("disabled", "disabled");
			return false;
		} else {
			$.ajax({
				url: "/login/loginVerifyUsername/"+username,
				type: "GET",
				success: function (result) {
					if (result.code === 200) {
						show_validate_msg("#username", "error",
								"用户名不存在");
						$("#login_btn")
								.attr("disabled", "disabled");
						lock = false;
					} else {
						show_validate_msg("#username", "success",
								"欢迎" + username + "登录");
						$("#login_btn").removeAttr("disabled");
					}
				}
			});
			return lock;
		}
	}

	function removeLoginDisabled() {
		$("#login_btn").removeAttr("disabled");
	}

	function verifyLogin() {
		$("input[name='username']").blur(verifyUsername);
		$("#captcha").blur(verifyCaptcha);


		if ($("#captcha").val() == "") {
			$("#captcha_note_parent").addClass("has-error");
			$("#captcha_note_child").text("验证码为空");
			$("#login_btn").attr("disabled", "disabled");
			return false;
		}

		//alert(verifyUsername);

		if (verifyUsername() && verifyCaptcha()) {
			$.ajax({
				url: "/login/verifyLogin",
				type: "GET",
				data: {
					"username": $("#username").val(),
					"password": $("#password").val()
				},
				success: function (result) {
					if (result.code === 100) {
						var url = result.extend.url;
						//alert(url);
						location.href = url;
					} else {
						show_validate_msg("#password", "error",
								"密码错误");
						$("#login_btn")
								.attr("disabled", "disabled");
					}
				}
			})
		}

	}

	//显示校验结果的提示信息
	function show_validate_msg(ele, status, msg) {
		//清除当前元素的校验状态
		$(ele).parent().removeClass("has-success has-error");
		$(ele).next("span").text("");
		if ("success" === status) {
			$(ele).parent().addClass("has-success");
			$(ele).next("span").text(msg);
		} else if ("error" === status) {
			$(ele).parent().addClass("has-error");
			$(ele).next("span").text(msg);
		}
	}

	/**生成一个随机数**/
	function randomNum(min, max) {
		return Math.floor(Math.random() * (max - min) + min);
	}

	/**生成一个随机色**/
	function randomColor(min, max) {
		var r = randomNum(min, max);
		var g = randomNum(min, max);
		var b = randomNum(min, max);
		return "rgb(" + r + "," + g + "," + b + ")";
	}

	/**绘制验证码图片**/
	function drawPic(show_num) {
		var canvas = document.getElementById("canvas");
		var width = canvas.width;
		var height = canvas.height;
		var ctx = canvas.getContext('2d');
		ctx.textBaseline = 'bottom';

		/**绘制背景色**/
		ctx.fillStyle = randomColor(280, 280); //颜色若太深可能导致看不清
		ctx.fillRect(0, 0, width, height);
		/**绘制文字**/
		var sCode = "A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";
		var aCode = sCode.split(",");
		for (var i = 0; i < 4; i++) {
			var txt = aCode[randomNum(0, aCode.length)];//得到随机的一个内容
			show_num[i] = txt.toLowerCase();
			ctx.fillStyle = randomColor(50, 160); //随机生成字体颜色
			ctx.font = randomNum(15, 40) + 'px SimHei'; //随机生成字体大小
			var x = 10 + i * 25;
			var y = randomNum(25, 45);
			var deg = randomNum(-45, 45);
			//修改坐标原点和旋转角度
			ctx.translate(x, y);
			ctx.rotate(deg * Math.PI / 180);
			ctx.fillText(txt, 0, 0);
			//恢复坐标原点和旋转角度
			ctx.rotate(-deg * Math.PI / 180);
			ctx.translate(-x, -y);
		}
		for (var i = 0; i <= 5; i++) { //验证码上显示线条
			ctx.strokeStyle = randomColor();
			ctx.beginPath();
			ctx.moveTo(Math.random() * width, Math.random() * height);
			ctx.lineTo(Math.random() * width, Math.random() * height);
			ctx.fillStyle = randomColor(50, 160);
			ctx.stroke();
		}
		for (var i = 0; i <= 30; i++) { //验证码上显示小点
			ctx.strokeStyle = randomColor();
			ctx.beginPath();
			var x = Math.random() * width;
			var y = Math.random() * height;
			ctx.moveTo(x, y);
			ctx.lineTo(x + 1, y + 1);
			ctx.fillStyle = randomColor(0, 250);
			ctx.stroke();
		}

	}
</script>
   </body>

</head>
</html>

<!--E:\00\travel\target-->